<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="user-scalable=no"/>
	<title>列表组件</title>
	<link rel="stylesheet" href="../common/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="../common/BingoTouch.css" />
	<script src="../common/iscroll.js"></script>
	<script src="../common/jquery-1.7.1.min.js"></script>
	<script src="../common/jquery.mobile-1.1.0.min.js"></script>
	<script src="../common/BingoTouch.js"></script>
</head>
<body>
<div data-role="page" class="container">
   <div data-role="content">
		<div class="header">
			<h1 class="title">List</h1>
			<div class="header-left">
				<div class="btn-back" data-role="BTButton" data-url="home.html">返回</div>
			</div>
			<div class="header-right">
				<!-- 右边按钮区域 -->
			</div>		
		</div>
		<div class="content">
			<div class="content-inner">					
				<!-- 列表菜单 -->
				<h2>1.普通列表菜单</h2>
				class="list-view"
				<ul class="list-view">
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" class="btn-active">列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
				</ul>			
				<!-- 列表菜单2 -->
				<h2>列表带图片菜单</h2>
				<ul class="list-view">
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right"><img src="statics/images/icon01.png" alt=""/>列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" class="btn-active"><img src="statics/images/icon02.png" alt=""/>列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right"><img src="statics/images/icon03.png" alt=""/>列表按钮</div></li>
				</ul>	
				<!-- 列表菜单3 -->
				<h2>多行带缩略图列表</h2>
				<ul class="list-view">
					<li>
						<div data-role="BTButton" data-icon="icon-download" icon-dir="right">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
						</div>
					</li>
					<li>
						<div data-role="BTButton" data-icon="icon-download" icon-dir="right" class="btn-active">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
						</div>
					</li>
					<li>
						<div data-role="BTButton" data-icon="icon-download" icon-dir="right">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
						</div>
					</li>
				</ul>
				如果要单独对图标或者下载单独绑定事件，可以先取消原有事件 mousedown="false" mouseup="false"
				<ul class="list-view">
					<li>
						<div data-role="BTButton" icon-dir="right" mousedown="false" mouseup="false">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>
							<span class="icon icon-download"></span>
						</div>
					</li>
					<li>
						<div data-role="BTButton" icon-dir="right" mousedown="false" mouseup="false">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>							
							<span class="icon icon-download"></span>
						</div>
					</li>
					<li>
						<div data-role="BTButton" icon-dir="right" mousedown="false" mouseup="false">							
							<div class="thumbnail">
								<img src="statics/images/icon01.png" alt=""/>
							</div>
							<div class="thumbnail-text">
								<h3>企业数据备份</h3>
								<p>版本1.1 | 1.2m | 下载：110次</p>
							</div>							
							<span class="icon icon-download"></span>
						</div>
					</li>
				</ul>
				<!-- 带标题的列表菜单 -->
				<h2>4.带标题的列表菜单</h2>
				class="list-view list-view-head"
				<ul class="list-view list-view-head">				
					<li><div data-role="BTButton" mousedown="false">列表标题</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
					<li><div class="btn-active" data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">列表按钮</div></li>
				</ul>
				<!-- 带标题的列表菜单 -->
				<h2>5.列表布局的表单-- mouseup=false 前2个点击弹出,保留了激活状态，第3个是点击跳转，不需要保留</h2>
				class="list-view list-view-head"
				<ul class="list-view list-view-head">				
					<li><div data-role="BTButton" mousedown="false">2列列表菜单</div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" mouseup="false">时间<label>2012年7月12日</label></div></li>
					<li><div class="btn-active" data-role="BTButton" data-icon="icon-list-right" icon-dir="right" mouseup="false">区域<label>广州市</label></span></div></li>
					<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right">星级<label>一星</label></div></li>
					<li><div data-role="BTButton" mousedown="false">姓名<label><input type="text" value="" class="input-large"/></label></div></li>
					<li><div data-role="BTButton" mousedown="false">描述<label><textarea name="" id="" cols="30" rows="3"></textarea></label></div></li>
				</ul>
					
				<h2>6.列表变成折叠菜单 —— 1次只能显示1个内容，想了解更多信息，可以查看折叠菜单</h2>
				class="list-view list-collapse"
				<ul class="list-view list-collapse">
					<li><div data-role="BTButton" class="btn-active" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮1</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮2</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
					<li><div data-role="BTButton" data-icon="icon-list-down" icon-dir="right" mousedown="false" mouseup="false">折叠按钮3</div>
						<div class="collapse-content">
							<img src="statics/images/map.png" alt=""/>
						</div>
					</li>
				</ul>
				
			</div>
		</div>		
	</div>
</div>
</body>
</html>